<template>
<!-- 添加/修改课程 -->
  <div style="text-align: left">
    <el-button class="add-button" type="primary" @click="dialogFormVisible = true">添加课程</el-button>
    <el-dialog
      title="添加/修改课程"
      :visible.sync="dialogFormVisible"
      @close="clear">

      <el-form :model="form" :rules="rules" style="text-align: left" ref="dataForm">
        <el-form-item label="课程名称" :label-width="formLabelWidth" prop="courseName">
          <el-input v-model="form.courseName" autocomplete="off" ></el-input>
        </el-form-item>
         <el-form-item label="课时/节" :label-width="formLabelWidth" prop="courseHour">
          <el-input type="number" v-model="form.courseHour" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程学费（元）" :label-width="formLabelWidth" prop="courseTuition">
          <el-input type="number" v-model="form.courseTuition" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="拼团学费（元）" :label-width="formLabelWidth" prop="courseTuition">
          <el-input type="number" v-model="form.ptTuition" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程类型" :label-width="formLabelWidth" prop="courseType">
          <el-select v-model="form.courseType" placeholder="请选择课程类型">
            <el-option
              v-for="item in courseTypeList"
              :key="item.name"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="预计招生人数" :label-width="formLabelWidth" prop="num">
          <el-input type="number" v-model="form.num" autocomplete="off" @keyup.native="number"></el-input>
        </el-form-item>
        <el-form-item label="开课老师" :label-width="formLabelWidth" prop="teacher">
          <el-input v-model="form.teacher" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="上课时间" :label-width="formLabelWidth" prop="teacher">
          <el-input v-model="form.courseTime" autocomplete="off"></el-input>
        </el-form-item>

         <el-form-item label="课程描述" :label-width="formLabelWidth" prop="courseDesc">
          <el-input v-model="form.courseDesc" autocomplete="off"></el-input>
        </el-form-item>

        <!-- 引入上传图片组件 -->
        <el-form-item label="封面" :label-width="formLabelWidth" prop="imageUrl">
          <el-input v-model="form.imageUrl" autocomplete="off" placeholder="图片 URL"></el-input>
          <img-upload @onUpload="uploadImg" ref="imgUpload"></img-upload>
        </el-form-item>

         <!-- 引入上传视频组件 -->
        <el-form-item label="公开课教学视频" :label-width="formLabelWidth" prop="videoUrl">
          <el-input v-model="form.videoUrl" autocomplete="off" placeholder="视频 URL"></el-input>
          <mp4-upload @onUpload="uploadVideo" ref="videoUpload"></mp4-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ImgUpload from '../content/ImgUpload'
  import Mp4Upload from '../content/Mp4Upload'
  export default {
    name: 'CouresAdd',
    components: {ImgUpload, Mp4Upload},
    data () {
      return {
        courseTypeList: [],
        dialogFormVisible: false,
        username: this.$store.state.username,
        rules: {
          courseName: [{ required: true, message: '课程名称不能为空', trigger: 'blur' }],
          courseHour: [{ required: true, message: '课时/节不能为空', trigger: 'blur' }],
          courseTuition: [{ required: true, message: '课程学费（元）不能为空', trigger: 'blur' }],
          num: [{ required: true, message: '人数不能为空', trigger: 'blur' }],
          courseType: [{ required: true, message: '课程类型不能为空', trigger: 'blur' }],
          teacher: [{ required: true, message: '不能为空', trigger: 'blur' }],
          courseDesc: [{ required: true, message: '课程描述不能为空', trigger: 'blur' }]

        },
        form: {
          id: '',
          courseId: '',
          courseName: '',
          courseHour: '',
          num: '',
          courseTime: '',
          courseTuition: '',
          createTime: '',
          ptTuition: '',
          courseType: '',
          teacher: '',
          courseDesc: '',
          imageUrl: '',
          mp4Url: '',
          videoUrl: ''
        },
        formLabelWidth: '120px'
      }
    },
    mounted () {
      this.loadcourseTypeList()
    },
    methods: {
      number(){　　  // input只能输入正整数的验证
　　　   this.famount=this.famount.replace(/[^\.\d]/g,'');
        this.famount=this.famount.replace('.','');
　　   },
      clear () {
        this.$refs.imgUpload.clear()
        this.$refs.videoUpload.clear()
        this.form = {
          id: '',
          courseId: '',
          courseName: '',
          courseHour: '',
          createTime: '',
          num: '',
          courseTime: '',
          courseTuition: '',
          ptTuition: '',
          courseType: '',
          teacher: '',
          courseDesc: '',
          imageUrl: '',
          videoUrl: ''
        }
      },
      onSubmit () {
        this.$axios
          .post('/admin/content/course', {
            id: this.form.id,
            courseId: this.form.courseId,
            createTime: this.form.createTime,
            courseName: this.form.courseName,
            courseHour: this.form.courseHour,
            num: this.form.num,
            courseTime: this.form.courseTime,
            courseTuition: this.form.courseTuition,
            ptTuition: this.form.ptTuition,
            courseType: this.form.courseType,
            teacher: this.form.teacher,
            courseDesc: this.form.courseDesc,
            username: this.username,
            imageUrl: this.form.imageUrl,
            videoUrl: this.form.videoUrl

          }).then(resp => {
            if (resp && resp.data.code === 200) {
              this.dialogFormVisible = false
              this.$emit('onSubmit')
              // 从后端返回信息
              this.$alert(resp.data.message, '提示', {
                type: 'success',
                dangerouslyUseHTMLString: true
              })
            } else {
              // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
              type: 'error',
              dangerouslyUseHTMLString: true
              })
            }
        })
      },
      uploadImg () {
        this.form.imageUrl = this.$refs.imgUpload.url
      },
      uploadVideo () {
        this.form.videoUrl = this.$refs.videoUpload.url
      },
      loadcourseTypeList () {
        var _this = this
        this.$axios.get('/course/courseTypeList').then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.courseTypeList = resp.data.result
        } else {
          // 从后端返回错误信息
            this.$alert('<p style=" color:#F00;">' + resp.data.message + '</p>', '错误提示', {
              dangerouslyUseHTMLString: true
            })
        }
        })
      }
    }
  }
</script>

<style scoped>
  .add-button {
     margin: 0px 0 5px 15px;
  }
</style>
